/*
 * 测肤统计的柱状图
 * @Author: ljb
 * @Date: 2018-08-13 17:09:33
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-10-09 10:27:40
 */
<style  lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-home-component-skin-chart {
        width: 100%;
		height: 330px;
		margin-top: 20px;
		overflow: hidden;
    }

</style>
<template>
	<div
		:id="`skin_chart_${type}`"
		class="v-home-component-skin-chart"/>
</template>

<script>
import echarts from 'echarts';

export default {
	name: 'VisitLineChart',
	props: {
		loading: { // echart的loading
			type: Boolean,
			default() {
				return false;
			},
		},
		skinStatistics: { // 测肤数据
			type: Array,
			default() {
				return [];
			},
		},
		dataType: {	// 当前统计类型，日/月/年
			type: String,
			default() {
				return 'month';
			},
		},
		type: {	// 店铺(store)或设备(device)
			type: String,
			required: true,
		},
	},
	data() {
		return {
			line_chart: null,
			title_map: {
				year: this.$t('home.year'),
				month: this.$t('home.month'),
				day: this.$t('home.day'),
			},			// 折线图的y轴的title映射表
			word_map: {
				store: 'name',
				device: 'device_name',
			},			// store和device的name字段map
			chart_option_map: {
				store: {
					title: this.$t('home.store_title'),
					tooltip: {},
					legend_show: false,
					color: ['#8e84f0'],
					grid: {
						left: '40',
						right: '40',
						top: '10%',
						bottom: '8%',
					},
				},
				device: {
					title: this.$t('home.device_title'),
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
						},
					},
					legend_show: true,
					color: ['#5fc0f2', '#8d84ef', '#ff9fbc', '#8278e9', '#96bfff', '#37a2da', '#61dee1', '#e7bcf2', '#ffc2ec', '#ff859c', '#fcbf55', '#ffd180', '#575bec', '#575bec', '#575bec', '#575bec', '#cd97ff', '#cd97ff', '#cd97ff', '#cd97ff', '#6db8f2', '#ec6f7b', '#ec6f7b', '#fab1d4', '#f89686', '#f8d3ac', '#e8b3af', '#e8b3af', '#ee8e7e', '#e7bcf2', '#f785a5', '#ffcdb4', '#94d3ed', '#ee8cd1', '#84c5dd', '#b1e094', '#a8ace7'],
					grid: {
						left: '40',
						right: '40',
						top: '25%',
						bottom: '8%',
					},
				},
			},
		};
	},
	watch: {
		skinStatistics: {
			handler() {
				if (this.skinStatistics.length === 0) return;
				this.formatData();
			},
			deep: true,
		},
		loading() {
			if (this.loading) {
				this.line_chart.showLoading({
					color: '#8e84f0',
				});
			} else {
				this.line_chart.hideLoading();
			}
		},
	},
	mounted() {
		this.line_chart = echarts.init(document.getElementById(`skin_chart_${this.type}`));
		if (this.skinStatistics.length > 0) {
			this.formatData();
		}
	},
	methods: {
		/**
         * 初始化折线图
		 * @param  {Array} legend_data {图例名称}
		 * @param  {Object} grid        {位置配置}
		 * @param  {Object} xAxis       {x轴的配置参数}
		 * @param  {Object} yAxis       {y轴的配置参数}
		 * @param  {Array} series      {数据参数}
		 * @param  {Number} dataZoom    {x轴显示数量控制}
		 * @return {undefined}
		 */
		initChart({
			legend_data, xAxis, yAxis, series, dataZoom,
		}) {
			this.line_chart.clear();

			const option = {
				tooltip: this.chart_option_map[this.type].tooltip,
				legend: {
					show: this.chart_option_map[this.type].legend_show,
					type: 'scroll',
					x: '70',
					width: '50%',
					data: legend_data,
				},
				axisPointer: {
					snap: true,
					lineStyle: {
						color: '#ccc',
					},
					// @see {@link http://echarts.baidu.com/option.html#axisPointer.label.precision}
					label: {
						precision: 0,
					},
				},
				dataZoom: [
					{ // 这个dataZoom组件，也控制x轴。
						type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
						realtime: true,
						start: 100 - dataZoom,
						end: 100,
						zoomLock: true,
					},
				],
				grid: this.chart_option_map[this.type].grid,
				xAxis,
				yAxis,
				series,
				color: this.chart_option_map[this.type].color,
			};

			this.line_chart.setOption(option);
		},

		/**
         * 格式化数据的主方法
         * @return {undefined}
         */
		formatData() {
			const chart_option = {
				legend_data: [],
				xAxis: {
					axisTick: {
						alignWithLabel: true,
					},
					axisLabel: {
						interval: 0,
					},
					data: [],
				},
				yAxis: {
					name: `${this.title_map[this.dataType] + this.$t('home.test_number')}`,
					type: 'value',
				},
				series: [],
				dataZoom: 5,
			};

			const device_width = document.querySelector('.v-home-component-skin-chart').offsetWidth;

			const data_length = this.skinStatistics[0] ? this.skinStatistics[0].count_skin.length : 1;

			const max_dataZoom = (parseFloat((device_width / 120).toFixed(2)) * 100) / data_length;

			chart_option.dataZoom = max_dataZoom;

			this.skinStatistics.forEach((statistics, index) => {
				const name = statistics[this.word_map[this.type]] || this.$t('common.unknown');

				const serie = {
					name,
					type: 'bar',
					barWidth: '30%',
					stack: this.type,
					data: [],
				};

				statistics.count_skin.forEach((test) => {
					const { date } = test;
					const { count } = test;
					if (index === 0) {
						chart_option.xAxis.data.push(date);
					}
					serie.data.push(count);
				});

				chart_option.legend_data.push(name);
				chart_option.series.push(serie);
			});

			this.initChart(chart_option);
		},
	},
};
</script>
